import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import { apiPlatformActivityRecordtPage, apiPlatformActivitySheetView,apiGetActivityConfig } from '@/request/activityManager'
import GoBack from '@/components/TheGoBack'
import ErrorList from 'antd/lib/form/ErrorList';
export default class joinUser extends Component {
    constructor(props) {
        super(props)
        this.state = {
            columns: [{
                title: "活动名称",
                dataIndex: "activityName",
                key: "activityName",
            },
            {
                title: "活动类型",
                dataIndex: "activityType",
                key: "activityType", render: (text, render) => {
                    const obj = this.state.optionType.find(item => item.value === text)
                    return obj ? obj.label : ''

                },

            },
            {
                title: "获取方式",
                dataIndex: "activityWay",
                key: "activityWay", render: (text, render) => {
                    const obj = this.state.optionWay.find(item => item.value === text)
                    return obj ? obj.label : ''

                },

            },
            
            {
                title: "活动状态",
                dataIndex: "activityStatus",
                key: "activityStatus",
                render: (text, render) => {
                    console.log(text);
                    let txt = ''
                    switch (text) {
                        case 0:
                            txt = '正常'
                            break;
                        case 1:
                            txt = '关闭'
                            break;
                        default:
                            break;
                    }
                    return txt;
                },
            },

            ],
            dataSource: [],
            columnsUser: [{
                title: "用户ID",
                dataIndex: "memberId",
                key: "memberId",
            },
            {
                title: "用户昵称",
                dataIndex: "nickName",
                key: "nickName",
            },
            {
                title: "手机号",
                dataIndex: "memberMobile",
                key: "memberMobile",
            },
            {
                title: "参与时间",
                dataIndex: "participationTime",
                key: "participationTime",
            },
            {
                title: "购买商品",
                dataIndex: "goodsName",
                key: "goodsName",
            },
            {
                title: "商品规格",
                dataIndex: "skuKeyValue",
                key: "skuKeyValue",
            },
            {
                title: "购买数量",
                dataIndex: "orderProductCount",
                key: "orderProductCount",
            }
            ],
            dataSourceUser: [],
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            activityId: '',
            total: 0,
            optionType: [],
            optionWay: []
        }
    }
    async componentDidMount() {
        let activityId = this.props.match.params.id
        await this.getConfigTypes('ACTIVITY_TYPE', '')
        await this.getConfigTypes('ACTIVITY_WAY')


        await this.setState({
            activityId
        }, () => {
            this.getPage(activityId)
            this.getInfo(activityId)
        })

    }
    async getConfigTypes(platformSetKey, platformSetUnit) {
        const res = await apiGetActivityConfig({ platformSetKey})
        if (res.code === 0) {
            if (platformSetKey&&platformSetKey === 'ACTIVITY_TYPE') {
                this.setState({
                    optionType: res.data.map(item => {
                        return {
                            ...item,
                            label: item.platformSetShowValue,
                            value: item.platformSetUseValue
                        }
                    })
                })
            } else {
                this.setState({
                    optionWay: res.data.map(item => {
                        return {
                            label: item.platformSetShowValue,
                            value: item.platformSetUseValue
                        }
                    })
                })
            }

        }
    }
    async getInfo() {
        const res = await apiPlatformActivitySheetView({ activityId: this.state.activityId })
        if (res.code === 0 && res.data) {
            this.setState({
                dataSource: [{ activityName: res.data.activityName,activityWay:res.data.activityWay, activityStatus: res.data.activityStatus, activityType: res.data.activityType }]
            })
        }
    }
    async getPage() {
        let { pageSize, pageNo } = this.state.pageData
        const res = await apiPlatformActivityRecordtPage({ activityId: this.state.activityId, pageNo, pageSize })
        if (res.code === 0 && res.data) {
            this.setState({
                dataSourceUser: res.data.map(item => {
                    return {
                        activityRecordId: item.activityRecordId,
                        couponTitle: item.couponTitle,
                        goodsName: item.goodsName,
                        memberId: item.memberId,
                        memberMobile: item.memberMobile,
                        nickName: item.nickName,
                        orderProductCount: item.orderProductCount,
                        participationTime: item.participationTime,
                        skuKeyValue: item.skuKeyValue ? JSON.parse(item.skuKeyValue).skuAttribute.map(sku => {
                            return `${sku.key}:${sku.value}`
                        }).join(';') : ''
                    }
                }),
                pageData: {
                    pageNo, pageSize
                }, total: res.totalCount
            })
        }
    }
    pageChange(e, a) {
        this.setState({
            pageData: {
                pageSize: this.state.pageData.pageSize,
                pageNo: e
            }
        }, () => {
            this.getPage()
        })
    }
    render() {
        const { columns, dataSource, dataSourceUser, columnsUser, loading, pageData, total } = this.state
        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title="参与用户" />
                <div style={{ marginTop: 20 }}>
                    <strong >活动信息</strong>
                    <TheTable style={{ marginTop: 20 }} loading={loading} columns={columns} dataSource={dataSource} />
                </div>
                <div style={{ marginTop: 20, }}>
                    <strong >参与用户</strong>
                    <TheTable style={{ marginTop: 20 }} loading={loading} scroll={{ x: 'max-content', y: '43vh' }} columns={columnsUser} dataSource={dataSourceUser} />
                    <ThePagination pageNo={pageData.pageNo} pageSize={pageData.pageSize} total={total} pageChange={(e) => this.pageChange(e)} />

                </div>

            </div>
        );
    }
}
